<script>
import menuList from "@/config/menuConfig";
import memoryUtils from "@/utils/memoryUtils";
export default {
  data() {
    return {
      menuNodes: "",
    };
  },
  render() {
    return (
      <div class="navbar">
        <el-menu
          default-active={this.$route.path}
          router={true}
          default-openeds={['/students']}
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          {this.menuNodes}
        </el-menu>
      </div>
    );
  },
  mounted() {
    this.menuNodes = this.getMenuNodes(menuList);
  },
  components: {},

  methods: {
    hasAuth(item){
      const {index,isPublic} = item;
      const menus = memoryUtils.user.role.menus;
      const username = memoryUtils.user.username;
      if(username=='admin'||isPublic||menus.indexOf(index)!==-1){
        return true
      }else if(item.children){
        return !!item.children.find(child=>menus.indexOf(child.index) !==-1)
      }
      return false
    },
    getMenuNodes(menuList) {
      return menuList.map((item) => {
        if(this.hasAuth(item)){
        if (!item.children) {
          return (
            <el-menu-item index={item.index}>
              <i class={item.icon}></i>
              <span slot="title">{item.title}</span>
            </el-menu-item>
          );
        } else {
          return (
            <el-submenu index={item.index}>
              <template slot="title">
                <i class={item.icon}></i>
                <span>{item.title}</span>
              </template>
              {this.getMenuNodes(item.children)}
            </el-submenu>
          );
        }
      }
      });
    },
  },
};
</script>

<style scoped>
</style>